<template>
    <div class="user-retention-analysis">
        <el-radio-group v-model="index">
            <el-radio-button label="1">存留率</el-radio-button>
            <el-radio-button label="2">存留数</el-radio-button>
        </el-radio-group>
        <el-table
                class="table"
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="首次使用时间">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="首日新增用户">
            </el-table-column>
            <el-table-column label="留存率" align="center">
                <el-table-column
                        prop="name"
                        label="1天后" />
                <el-table-column
                        prop="province"
                        label="2天后" />
                <el-table-column
                        prop="city"
                        label="3天后" />
                <el-table-column
                        prop="zip"
                        label="4天后" />
                <el-table-column
                        prop="zip"
                        label="5天后"  />
                <el-table-column
                        prop="zip"
                        label="6天后" />
                <el-table-column
                        prop="zip"
                        label="7天后" />
                <el-table-column
                        prop="zip"
                        label="14天后" />
                <el-table-column
                        prop="zip"
                        label="30天后" />
            </el-table-column>
        </el-table>
        <p class="caption">用户访问时段，使用时长，偏好：菜式，口味，常吃食材</p>
    </div>
</template>

<script>
import { subComponentMixin } from '@/mixins/user-data'
export default {
  name: 'UserRetentionAnalysis',
  mixins: [subComponentMixin],
  data () {
    return {
      index: '1',
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    .table {
        margin-top: $gap-default;
    }
    .caption {
        font-size: 105%;
        font-weight: bold;
    }
</style>
